<template>
  <div flex="main:left" v-resize>
    <div>
      <el-menu
  
        ref="menu"
        class="menu sidear_container"
        background-color="#ffeee4"
        text-color="#bf9276"
        active-text-color="#ff5f19"
        :unique-opened="true"
        :default-active="activeIndex"
      >
        <el-sub-menu
          :index="`${index}`"
          :unique-opened="true"
          v-for="(chapter, index) in catalogue"
          :key="index"
        >
          <template slot="title">
            <el-tooltip :content="chapter.title" placement="bottom" effect="light">
  <p class="text-ellipsis-single">{{ chapter.title }}</p>
</el-tooltip>
            </template>
          <el-menu-item-group
            v-for="(lesson, lessonIndex) in chapter.lessonInfo"
            :key="lesson.lessonId"
          >
            <el-menu-item :index="`${index}-${lessonIndex}`" v-if="chapter.lessonInfo">
              <div flex="main:left" @click="lessonChange(lesson)">
                <span
                  
                  class="iconfont icon icon-bofang"
                ></span>
                <p class="text-ellipsis-single">{{ lesson.title }}</p>
               
              </div>
              
            </el-menu-item>
            <el-menu-item v-if="lesson.lessonData.coursewareOssPath" :index="`${index}-${lessonIndex+1}`">
                 <p
                  @click="download(lesson.lessonData.coursewareOssPath)"
                  class="download"
                   
                  :href="lesson.lessonData.coursewareOssPath"
                  >下载课件
                  <span class="iconfont icon icon-download-1-copy"></span
                ></p>
            </el-menu-item>
                <el-menu-item v-if="lesson.lessonData.homeworkOssPath"  :index="`${index}-${lessonIndex+2}`">
                <p
                 @click="download(lesson.lessonData.homeworkOssPath)"
                  target="_blank"
                  class="download"
              
                  :href="lesson.lessonData.homeworkOssPath"
                  >课后作业</p
                ></el-menu-item
              >
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    </div>
    <courseVideo
      :videoUrl="videoUrl"
      @playEnd="playEnd"
      ref="videoPlay"
    ></courseVideo>
  </div>
</template>

<script lang="ts">

import courseVideo from "/@/components/course/courseVideo.vue";
export default {
  components: {
    courseVideo,
  },
  props: {
    catalogue: Array,
    videoUrl: String,
    activeChapter: String,
  },
  data() {
    return {
      autoHeight: "",
      activeIndex: "0-0",
    };
  },
  mounted() {},

  directives: {
    resize: {
      bind: (el) => {
        el._RESIZE = setInterval(() => {
          const width = el.offsetWidth > 1400 ? 1400 : el.offsetWidth;
          el.style.height = (width * 1080) / 1980 + "px";
          el.style.width = width;
        }, 50);
      },
      unbind: (el) => {
        clearInterval(el._RESIZE);
      },
    },
  },
  watch: {
    autoHeight(val) {
      console.log(val);
    },
  },
  methods: {
    download(url){
     window.location = url
    },
    // 是否含有附件
    isHaveAccessory(lesson) {
      if (!lesson.lessonData) return false;
      return lesson.coursewareOssPath!=='' || lesson.homeworkOssPath!=='';
    },

    // 切换章节课时
    initActiveChapterIndex(activeChapter, activeLesson) {
      const activeChapterIndex = this.catalogue.findIndex(
        (chapter) => chapter.chapterId === activeChapter
      );
      const activeLessonIndex = this.catalogue[
        activeChapterIndex
      ].lessonInfo.findIndex((lesson) => lesson.lessonId === activeLesson);
      this.$nextTick(() => {
        // this.$refs.menu.open(`${activeChapterIndex}-${activeLessonIndex}`);
        this.activeIndex = `${activeChapterIndex}-${activeLessonIndex}`
        this.lessonChange(
          this.catalogue[activeChapterIndex].lessonInfo[activeLessonIndex]
        );
      });
      return;
    },
 
    lessonChange(lesson) {
      this.$emit("lessonChange", lesson.lessonId);
    },
    changeVideo(path) {
      this.$refs.videoPlay.switchHandle(path);
    },
    playEnd() {
      this.$emit("playEnd");
    },
  },
};
</script>

<style lang="scss" scoped>
.menu {
  width: 240px;
}
.icon {
  margin: 0 6px;
  cursor: pointer;
}

.download:hover {
  color: #ff5f19;
}
.sidear_container {
  max-height: 100vh;
  overflow-y: auto;
  height: 100%;
}
::-webkit-scrollbar {
  width: 5px;
  height: 1px;
}
::-webkit-scrollbar-track-piece {
  background-color: #ffeee4;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: #e9c5b4;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  background-color: #e9c5b4;
  border-radius: 6px;
}
</style>